<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用栅格系统</title>

        <!-- 使用 link 链接外部样式，必须指定 rel 为 stylesheet  ，使用 href 指定样式文件名称 -->
        <link rel="stylesheet" href="cells.css" >

        <!-- 在 style 元素内部指定当前页面上所特有的样式 -->
        <style type="text/css">
            body { margin : 0 ;  padding: 0 ; }
            .wrapper { border: 5px solid red ; }
            .container { border: 3px solid blue ; width: 80% ; margin: auto ; }
            .item { height: 330px ; }
            .item a {
                display: block ;
                height: 300px ;
                width: 95% ;
                background-color: #1e9fff;
                margin: 15px auto ;
            }
        </style>
    </head>
    <body>

        <!-- wrapper 是一个贯通浏览器左右边界的元素-->
        <div class="wrapper">
            <!-- container 是一个在 wrapper 内部左右居中对齐的元素 -->
            <div class="row container">
                <div class="cells-5-1 item">
                    <a href=""></a>
                </div>
                <div class="cells-5-1 item">
                    <a href=""></a>
                </div>
                <div class="cells-5-1 item">
                    <a href=""></a>
                </div>
                <div class="cells-5-1 item">
                    <a href=""></a>
                </div>
                <div class="cells-5-1 item">
                    <a href=""></a>
                </div>
            </div>

        </div>

    </body>
</html>